---
title: Déployer votre site Astro avec Vercel
description: Comment déployer votre site Astro vers le web sur Vercel.
sidebar:
  label: Vercel
type: deploy
logo: vercel
supports: ['ssr', 'static']
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import ReadMore from '~/components/ReadMore.astro';
import { Steps } from '@astrojs/starlight/components';

Vous pouvez utiliser [Vercel](http://vercel.com/) pour déployer un site Astro vers son réseau périphérique mondial (ou « global edge network » en anglais) sans aucune configuration.

Ce guide comprend des instructions pour le déploiement vers Vercel via l'interface utilisateur du site web ou la CLI de Vercel.

## Configuration du projet

Votre projet Astro peut être déployé sur Vercel en tant que site statique, ou en tant que site rendu côté serveur.

### Site statique

Votre projet Astro est un site statique par défaut. Vous n'avez besoin d'aucune configuration supplémentaire pour déployer un site Astro statique sur Vercel. 

### Adaptateur pour le rendu à la demande

Ajoutez [l'adaptateur Vercel](/fr/guides/integrations-guide/vercel/) pour activer [le rendu à la demande](/fr/guides/on-demand-rendering/) dans votre projet Astro avec la commande `astro add` suivante. Ceci installera l'adaptateur et apportera les changements appropriés à votre fichier `astro.config.mjs` en une seule étape.

<PackageManagerTabs>
  <Fragment slot="npm">
    ```shell
    npx astro add vercel
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```shell
    pnpm astro add vercel
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```shell
    yarn astro add vercel
    ```
  </Fragment>
</PackageManagerTabs>

<ReadMore>Consultez le [guide de l'adaptateur Vercel](/fr/guides/integrations-guide/vercel/) pour installer manuellement à la place, ou pour plus d'options de configuration, telles que le déploiement du middleware Astro de votre projet à l'aide des fonctions Vercel Edge.</ReadMore>

## Comment déployer

Vous pouvez déployer Vercel via l'interface utilisateur du site web ou en utilisant l'interface de ligne de commande (CLI) de Vercel. Le processus est le même pour les sites Astro statiques et rendus à la demande.

### Déploiement via l'interface utilisateur du site web

<Steps>
1. Poussez votre code vers votre dépôt Git en ligne (GitHub, GitLab, BitBucket).

2. [Importez votre projet](https://vercel.com/new) dans Vercel.

3. Vercel détectera automatiquement Astro et configurera les bons paramètres.

4. Votre application est déployée ! (p. ex. [astro.vercel.app](https://astro.vercel.app/))
</Steps>

Une fois que votre projet a été importé et déployé, tous les transferts ultérieures vers les branches généreront des [déploiements de prévisualisation (Anglais)](https://vercel.com/docs/concepts/deployments/environments#preview), et toutes les modifications apportées à la branche de production (communément appelée « main ») donneront lieu à un [déploiement de production (Anglais)](https://vercel.com/docs/concepts/deployments/environments#production).

<ReadMore>Apprenez-en plus sur l'[intégration Git de Vercel (Anglais)](https://vercel.com/docs/concepts/git).</ReadMore>

### Déploiement via CLI

<Steps>
1. Installez la [CLI de Vercel](https://vercel.com/cli) et exécutez `vercel` pour déployer.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install -g vercel
      vercel
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add -g vercel
      vercel
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn global add vercel
      vercel
      ```
      </Fragment>
    </PackageManagerTabs>

2. Vercel détectera automatiquement Astro et configurera les bons paramètres.

3. Lorsqu'il sera demandé `Want to override the settings? [y/N]` (Souhaitez-vous annuler les réglages), sélectionner `N`.

4. Votre application est déployée ! (p. ex. [astro.vercel.app](https://astro.vercel.app/))
</Steps>

### Configuration du projet avec `vercel.json`

Vous pouvez utiliser `vercel.json` pour remplacer le comportement par défaut de Vercel et pour configurer des paramètres supplémentaires. Par exemple, vous pouvez souhaiter attacher des en-têtes aux réponses HTTP de vos déploiements. 

<ReadMore>En savoir plus sur [la configuration d'un projet Vercel (Anglais)](https://vercel.com/docs/project-configuration).</ReadMore>
